<template>
    <div class="big-box">
        <div class="content-box">
            <!-- 公告栏 -->
            <el-skeleton :loading="loading" animated>
                <template #template>
                    <skeletonItem height="35px"></skeletonItem>
                </template>
                <template #default>
                    <div class="Notice" @click="notes">
                        <h1>公告:</h1>
                        <div>{{ note }}</div>
                        <i class="iconfont icon-arrowright"></i>
                    </div>
                </template>
            </el-skeleton>

            <div class="main">
                <el-row :gutter="10">
                    <!-- 中间部分 -->
                    <el-col :xs="24" :sm="17">
                        <div class="main-content">
                            <Map></Map>
                            <!-- 选项区域 -->
                            <el-skeleton :loading="loading" animated>
                                <template #template>
                                    <skeletonItem height="35px" top="10px"></skeletonItem>
                                </template>
                                <template #default>
                                    <div class="main-lable--box">
                                        <ul>
                                            <li @click="changelable(null, 1)" :class="[actice == null ? 'active' : '']">全部
                                            </li>
                                            <li v-for="item in labledata" @click="changelable(item.id, 2)"
                                                :class="[actice == item.id ? 'active' : '']">{{
                                                    item.lable_name
                                                }}</li>
                                        </ul>

                                    </div>
                                </template>
                            </el-skeleton>
                            <!-- 文章区域 -->
                            <div class="main-article-box">
                                <div class="content" id="content">
                                    <el-row :gutter="5">
                                        <el-col :xs="24" :sm="12">
                                            <el-skeleton :loading="loading" animated v-for="item in articlelistleft">
                                                <template #template>
                                                    <articleskltonl></articleskltonl>
                                                </template>
                                                <template #default>
                                                    <ArticleItem @click="toArticle(item.id)" :article=item></ArticleItem>
                                                </template>
                                            </el-skeleton>
                                        </el-col>
                                        <el-col :xs="24" :sm="12">
                                            <el-skeleton :loading="loading" animated v-for="item in articlelistright">
                                                <template #template>
                                                    <articleskltonl></articleskltonl>
                                                </template>
                                                <template #default>
                                                    <ArticleItem @click="toArticle(item.id)" :article=item></ArticleItem>
                                                </template>
                                            </el-skeleton>
                                        </el-col>
                                    </el-row>
                                    <div class="loading">{{ isend ? "暂无数据" : "正在加载..." }}</div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <!-- 右侧 -->
                    <el-col :xs="0" :sm="7">
                        <!--  -->
                        <Rightbox></Rightbox>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { tonum } from "@/utils/index.js"
import { deepClone } from "@/utils/index.js"
import skeletonItem from "@/components/SkeletonItem/skeletonItem.vue"
import articleskltonl from "@/components/SkeletonItem/articleskltonl.vue"
import ArticleItem from "@/components/articleItem.vue"
import Rightbox from "@/components/Rightbox.vue";
import { throttle } from "@/utils/index.js"
import Map from "@/components/Map.vue"
import { useRouter } from "vue-router";
import { getconfig } from "@/api/user.js"
import { getarticlelist, getlables, selectlable } from "@/api/article.js"
import moment from "moment";
let router = useRouter()
/* 节流函数 */
let contentRef = null
let loading = ref(false);
let throttlefun = throttle()
let isend = ref(false)
let note = ref("")
let labledata = ref([])
let current = ref(1)
let actice = ref()

let page = ref(1)
let pageSize = ref(6)
let allarticleList = ref([])
let articlelistright = ref([])
let articlelistleft = ref([])

/* 获取文章列表 */
async function getarticle() {
    let res = await getarticlelist({
        page: page.value,
        pageSize: pageSize.value
    })
    if (res.data.status == 200) {
        diliverpage(res)
    } else if (res.data.status == 400 || res.data.message == "暂无数据") {
        isend.value = true
    }
}
onMounted(async () => {
    loading.value = true
    await getarticle()
    loading.value = false
    let lables = await getlables()
    labledata.value = deepClone(lables.data.data)
    let res = await getconfig()
    note.value = res.data.data.data.Bolog_notice
    /* 无线滚动的 */
    contentRef = document.getElementById('content')
    let contentRefHeight = contentRef.clientHeight
    let scrollHeight = contentRef.scrollHeight
    contentRef.addEventListener("scroll", (e) => {
        throttlefun(async () => {
            let scrollTop = content.scrollTop
            let distance = scrollHeight - contentRefHeight - scrollTop
            if (distance < 20 && isend.value == false) {
                /* 记载数据 */
                page.value++
                if (current.value == 1) {
                    await getarticle()
                } else {
                    let res = await selectlable({ lable_id: actice.value, page: page.value, pageSize: pageSize.value })
                    if (res.data.status == 200) {
                        diliverpage(res)
                    } else if (res.data.status == 400 || res.data.message == "暂无数据") {
                        isend.value = true
                    }
                }
            }
        }, 100)
    })
})
function diliverpage(res) {
    if (res.data.data.count < pageSize.value) {
        isend.value = true
    }
    let { articlelist } = res.data.data
    let articleitem = articlelist.map(item => {
        return {
            id: item.id,
            article_cover: item.article_cover,
            article_istop: item.article_istop,
            article_description: item.article_description,
            article_title: item.article_title,
            articlee_strs: item.articlee_strs,
            article_viewtime: tonum(item.article_viewtime),
            create_time: moment(item.createdAt).format("YYYY-MM-DD"),
            lables: item.lables
        }
    })
    if (allarticleList.value.length == 0) {
        articleitem.sort((a, b) => {
            return b.article_istop - a.article_istop
        })
    }
    allarticleList.value = allarticleList.value.concat(articleitem) // 合并数组
    let i = 1
    articlelistright.value = []
    articlelistleft.value = []
    allarticleList.value.forEach(item => {
        if (i % 2 == 0) {
            articlelistright.value.push(item)
        } else {
            articlelistleft.value.push(item)
        }
        i++
    })
}
function toArticle(id) {
    router.push({
        path: "/article",
        query: {
            id: id
        }
    })
}
function notes() {
    ElMessageBox.alert(note.value, '公告', {
        confirmButtonText: 'OK',
    })
}
async function changelable(id, fleg) {
    isend.value = false
    actice.value = id
    current.value = fleg
    if (fleg == 1) {
        allarticleList.value = []
        articlelistright.value = []
        articlelistleft.value = []
        loading.value = true
        await getarticle()
        loading.value = false
    } else {
        loading.value = true
        page.value = 1
        let res = await selectlable({ lable_id: id, page: page.value, pageSize: pageSize.value })
        if (res.data.status == 200) {
            
            allarticleList.value = []
            articlelistright.value = []
            articlelistleft.value = []
            diliverpage(res)
        } else if (res.data.status == 400 || res.data.message == "暂无数据") {
            allarticleList.value = []
            articlelistright.value = []
            articlelistleft.value = []
            isend.value = true
        }
        loading.value = false
    }
}
</script>

<style lang="scss" scoped>
.active {
    @include userTheme {
        border: getThemeValue("hoverBorder");
        color: getThemeValue("hoverfontColor");
    }

}

.loading {
    text-align: center;
    font-size: $font-size-m;

    @include userTheme {
        font-family: getThemeValue("fontfamily");
        color:getThemeValue("fontColor");
    }

    cursor: pointer;
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icon-arrowright {
    font-size: $font-size-m;
}

.big-box {

    padding-top: 60px;
    width: 100%;
    @include bk-style;

    @include userTheme {
        color:getThemeValue("fontColor");
        background: getThemeValue("bgColor");
    }

    .content-box {
        width: 80%;
        height: 100%;
        margin: 0 auto;
    }

    .Notice {
        h1 {
            @include text-Onerow
        }

        div {
            width: 80%;
            @include text-Onerow
        }

        &:hover i {
            animation: move 0.3s infinite alternate;

            @include keyframes(move) {
                0% {
                    transform: translateX(0);
                }

                70%,
                30% {
                    transform: translateX(3px);
                }

                100% {
                    transform: translateX(5px);
                }
            }
        }

        &:hover {
            @include userTheme {
                border: getThemeValue("hoverBorder");

            }

        }

        @include userTheme {
            font-family: getThemeValue("fontfamily");
            background-color: getThemeValue("NoticeColor");
            color:getThemeValue("fontColor");
        }

        cursor: pointer;

        font-size: $font-size-l;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 40px;
        border-radius: 10px;

        margin-bottom: 15px;
    }

    .main {
        width: 100%;
        height: 100%;

        .main-content {
            padding: 10px;

            .main-article-box {
                width: 100%;
                margin-top: 10px;
                overflow: hidden;

                .content {
                    height: 620px;
                    width: 102%;
                    overflow-x: hidden;
                    overflow-y: auto;
                    padding: 0 15px 0 0;

                    &::-webkit-scrollbar {
                        /*隐藏滚轮*/
                        display: none;
                    }

                }
            }

            .main-lable--box {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 10px;
                height: 40px;
                width: 100%;
                border-radius: 10px;
                padding: 0 10px;

                @include userTheme {
                    background-color: getThemeValue("NoticeColor");
                    font-family: getThemeValue("fontfamily");
                    color:getThemeValue("fontColor");
                    
                }

                font-size: $font-size-m;
                cursor: pointer;

                ul {
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: start;
                    @include text-Onerow;

                    li {
                        margin: 0 5px;

                        padding: 5px 8px;
                        border-radius: 8px;
                        @include text-Onerow;

                        &:hover {
                            @include userTheme {
                                border: getThemeValue("hoverBorder");
                                color: getThemeValue("hoverfontColor");
                            }

                        }
                    }
                }

                .more {
                    &:hover {
                        @include userTheme {
                            color: getThemeValue("hoverfontColor");
                        }

                    }
                }

            }

            .main-top-box {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }

            .main-swiper-box {
                width: 49%;
                height: 220px;
                border-radius: 20px;
                background-color: aqua;
            }


        }


    }
}

@media screen and (max-width: 650px) {
    .big-box {
        .content-box {
            width: 100%;
        }

        .main-lable--box {
            .main-lable--box {
                ul {
                    li {
                        padding: 5px 2px !important;
                    }
                }
            }
        }
    }
}
</style>